<template>
  <el-container>
    <el-main>
      <div class="course-content">
        <div class="courer-operation">
          <div class="operation-left">
            <el-button type="primary" @click="$router.push({ path: '/wechat/messagereply/create' })">新建自动回复</el-button>
            <el-button type="primary">公众号菜单</el-button>
            <div class="options-link">
              <div class="link">
                <img alt="" src="@/assets/images/config/icon-option.png" />
                公众号配置
              </div>
            </div>
          </div>
        </div>
        <div class="course-table" id="course">
          <el-table :data="mpWechatData.data" style="width: 100%">
            <el-table-column prop="id" label="ID" min-width="120"></el-table-column>
            <el-table-column label="匹配规则" min-width="420">
              <template slot-scope="scope">
                <span>{{ scope.row.type }}@{{ scope.row.rule }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="reply_content" label="回复内容" min-width="520"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
                <el-button @click="del(scope.row.id)" type="text" style="color: red">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="params.page" :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper" :total="mpWechatData.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mpWechatMessage, delAutoReply } from '@/network/operate';

export default {
  data() {
    return {
      params: {
        page: 1,
        size: 10
      },
      mpWechatData: {}
    }
  },
  methods: {
    async getMpWechatMessage() {
      const { data } =  await mpWechatMessage(this.params)
      this.mpWechatData = data.data
    },
    handleSizeChange(size) {
      this.params.size = size;
      this.getMpWechatMessage();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getMpWechatMessage();
    },
    edit(id) {
      this.$router.push({
        path: '/wechat/messagereply/update',
        query: { id }
      })
    },
    del(id) {
      this.$confirm('确认操作?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { status, message } = await delAutoReply(id)
        if(status === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getMpWechatMessage()
        }else {
          this.$message({ type: 'error', message})
        }
      }).catch(() => {})
    }
  },
  created() {
    this.getMpWechatMessage();
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  text-align: center;
}

.el-main {
  background-color: #f1f2f9;
  // line-height: 200px;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;

  .course-content {
    width: 100%;
    height: auto;
    // float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    // margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
  }

  .courer-operation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    .operation-left {
      display: flex;
      align-items: center;

      .options-link {
        display: inline-block;
        vertical-align: middle;
        width: auto;
        height: 30px;
        box-sizing: border-box;
        padding: 0 0 0 20px;
        border-left: 1px solid #d8d8d8;
        margin-left: 30px;

        .link {
          width: 100%;
          height: 100%;
          cursor: pointer;
          font-size: 16px;
          font-weight: 400;
          color: #606266;
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
        }
      }
    }

    .operation-right {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;

      .key-ipt {
        margin-right: 10px;
        height: 40px;

        .el-input {
          width: 150px;
        }
      }

      // .btn {
      //   .el-button {
      //   }
      // }

      .more {
        height: 14px;
        font-size: 14px;
        font-weight: 400;
        color: #666;
        line-height: 14px;
        margin-left: 10px;
        cursor: pointer;

        img {
          width: 14px;
          height: 14px;
          margin-right: 5px;
        }

        // span {
        // }
      }
    }
  }

  ::v-deep .course-table {

    // 表格内容深度设置
    .el-table th {
      line-height: 0;
      background: rgb(241, 242, 249) !important;
      color: #333;
    }

    .el-table th:last-of-type>.cell {
      justify-content: flex-end;
    }

    .el-table td.el-table__cell div {
      display: flex;
      align-items: center;
    }

    .el-table .cell {
      color: #333;
      display: flex;
      align-items: center;
    }

    .el-table td:last-child .cell {
      justify-content: flex-end !important;
    }

    .title {
      margin-left: 10px;
      max-width: 340px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .member {
      margin-left: 5px;
      margin-right: 5px;
    }

    // 下拉菜单的样式
    .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  }

  // 分页
  .pagination {
    margin-top: 30px;
  }
}

div.el-dialog__wrapper {
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}

::v-deep .el-drawer {
  width: 360px !important;
}

::v-deep .el-drawer__header {
  margin: 0;
  padding: 0;
}

.choose {
  width: 100%;
  height: auto;
  float: left;
  padding: 30px;

  .title {
    width: 100%;
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 16px;
    margin-bottom: 30px;
    display: flex;
  }

  .content {
    .el-select {
      width: 100%;
      margin: 20px 0;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }
  }
}
</style>